<template>
  <Card title="热门文章" :shadow="true" padding="0">
    <ul v-if="hotArticle.length > 0" class="card-rank-list">
      <li v-for="(blog, index) in hotArticle" :key="index" class="rank-item">
        <router-link
          :to="{ path: `/article/detail/${blog.id}` }"
          active-class="current"
          class="rank-item-link"
        >
          <div class="rank-item-title">{{ blog.title }}</div>
          <div class="rank-item-number">
            <i class="iconfont icon-yanjing"></i>
            <span class="number">{{ blog.readCount }}</span>
          </div>
        </router-link>
      </li>
    </ul>
    <empty-data v-else style="height: 260px;" />
  </Card>
</template>

<script>
import EmptyData from '@/components/kit/EmptyData/index.vue'
import Card from '@/components/base/Card'
export default {
  name: 'HotArticle',
  components: {
    EmptyData,
    Card,
  },
  data() {
    return {
      hotArticle: [],
      loading: false
    }
  },
  mounted() {
    this.loadHotArticle()
  },
  methods: {
    async loadHotArticle() {
      try {
        this.loading = true
        const res = await this.$API.article.hot()
        if (res.data) {
          this.hotArticle = res.data
        }
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
  },
}
</script>
<style lang="less">
.card-rank-list {
  position: relative;
  .rank-item {
    padding: 0 15px;
    z-index: 1;
  }

  .rank-item-link {
    display: flex;
    justify-content: space-between;
    padding-left: 15px;
    height: 40px;
    color: @colorTextSub;
    line-height: 40px;
    text-decoration: none;
    border-bottom: 1px solid lighten(@colorBorderLight, 2%);
    .rank-item-title {
      margin-right: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rank-item-number {
      flex: none;
      .svg-icon {
        color: #808695 !important;
      }
    }
  }

  .rank-item-link:hover {
    color: @colorTextTitle;
    .svg-icon {
      color: @colorTextTitle !important;
    }
  }

  .current {
    color: @colorTextTitle;
  }
}
</style>
